<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <custom-dialog :city="city" :user="userinfo"></custom-dialog>
    <custom-input type="date"  class="b"></custom-input>
  </div>
  <script>

    Vue.component('custom-dialog', {
      props: {
        // age: Number,
        // age: {
        //   type:Number,
        //   default:30
        // },
        age: {
          type: Number,
          //必须的传
          required: true
        },
        city: Array,
        // user: Object
        user: {
          validator: function (val) {
            if (!val['name']) {
              //验证不通过
              return false;
            }
            //验证通过
            return true;
          }
        }
      },
      template: `<div>dialog</div>`,
      mounted() {
        console.log('age:', this.age)
        console.log('city:', this.city)
        console.log('user:', this.user)
      }
    })

    Vue.component('custom-input',{
      template:`<input type="text" class="a" />`
    })

    var vm = new Vue({
      el: "#app",
      data: {
        city: ['北京', '太原'],
        userinfo: { name: 'xiaoming', age: 20 }
      }
    })
  </script>
</body>

</html>